<template>
    <div id="app">
        <h1 class="h1">司机管理</h1>
        <hr>
        <el-row>
            <el-input v-model="input" placeholder="请输入要查询的司机姓名或手机号" class="input1"></el-input>
            <el-button type="primary" class="btn2" @click="queryDir">查询</el-button>
        </el-row>
        <el-row class="but1">
            <el-button type="primary" class="btn3" @click="addDriver">+ 添加司机</el-button>
            <el-button type="primary" class="btn3" @click="exportExcel">+ 导出全部司机</el-button>
        </el-row>
        <el-row>
            <el-table :data="tableData" style="width: 100%" S>
                <el-table-column prop="name" label="用户名" width="180">
                </el-table-column>
                <el-table-column prop="phone" label="手机号" width="180">
                </el-table-column>
                <el-table-column prop="isjob" label="在职状态" width="180">
                </el-table-column>
                <el-table-column prop="carNum" label="车牌号" width="180">
                </el-table-column>
                <el-table-column prop="lastLogin" label="最后登录时间" width="180">
                </el-table-column>
                <el-table-column prop="area" label="区域" width="180">
                </el-table-column>
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button type="success" class="btn2" @click="modify((scope.row))">修改
                        </el-button>
                        <el-button @click="delDriver(scope.row.id)" type="danger" class="btn2">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block" align="center">
                <el-pagination @current-change="handleCurrentChange" :page-size="pageSize"
                    layout="total, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            input: '',
            tableData: [],
            current: 1,
            total: 0,
            pageSize: 10,
            count: 0,
            data: {
                limit: this.pageSize,
                page: 1
            }
        }
    },
    created() {
        this.$axios({
            url: "/driver/list",
            method: "post",
            data: {
                "limit": this.pageSize,  //每页几条数据
                "page": this.page,
            }
        })
            .then(res => {
                // console.log(res);
                if (res.data.code === 0) {
                    this.tableData = res.data.data,
                    this.tableData.forEach(item=>{
                             item.lastLogin=this.formData(item.lastLogin)
                    })
                        // console.log(this.total);
                    // console.log(res.data.count);
                    this.total = res.data.count
                }
            })
    },

    methods: {

          formData(now){
      const date = new Date(now)
      var y = date.getFullYear() // 年份
      var m = date.getMonth() + 1 // 月份，注意：js里的月要加1
      var d = date.getDate() // 日
      var h = date.getHours() // 小时
      var min = date.getMinutes() // 分钟
      var s = date.getSeconds() // 秒
	 // 返回值，根据自己需求调整，现在已经拿到了年月日时分秒了 
      return y + '-' + m + '-' + d 

     },
        onSubmit() {
            // console.log('submit!');
        },
        
        addDriver() {
            this.$router.push('/adddriver')
        },

        modify(val) {
            this.$router.push({ path: "/modifyOwnercard" })
            // console.log(val);
            sessionStorage.setItem('data',JSON.stringify(val))
        },
        // 删除司机
        delDriver(val) {
            // console.log(val);
            this.$axios({
                url: "/driver/delete",
                method: 'get',
                params: {
                    id: val
                }

            })
                .then(res => {
                    console.log(res);
                    window.location.reload()

                })

        },
        // 查询司机
        queryDir() {
            this.$axios({
                url: "/driver/list",
                method: "post",
                data: {
                    name: this.input,
                }
            })
                .then(res => {
                    // console.log(res);
                    if (res.data.code === 0) {
                        this.tableData = res.data.data;
                        this.count = res.data.count
                    }
                })
        },
        // 分页
        handleCurrentChange(val) {
            let data = this.data;
            data.page = val;
            this.pageP(data)
        },
        pageP() {
            this.$axios({
                url: "/driver/list",
                method: "post",
                data: this.data
            })
                .then(res => {
                    // console.log(res);
                    if (res.data.code === 0) {
                        this.tableData = res.data.data,
                            this.total = res.data.count
                    }
                })
        },
        //导出列表
        exportExcel() {
            this.$axios({
                url: "/driver/exportData",
                method: "get",
                params: {},
                responseType: "blob", //返回的数据类型
            }).then((res) => {
                let bolb = new Blob([res.data]);
                let url = window.URL.createObjectURL(bolb);
                let link = document.createElement("a");
                link.style.display = "none";
                link.href = url;
                link.setAttribute("download", "用户列表.xlsx");
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link); //下载完成移除元素
                window.URL.revokeObjectURL(url); //释放掉blob对象
            });
        },

    }
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

.h1 {
    padding-left: 40px;
    padding-bottom: 20px;
    padding-top: 20px;
}

.input1 {
    width: 400px;
    padding-top: 15px;
    padding-left: 30px;
    padding-right: 10px;
}

.but1 {
    padding-left: 30px;
    padding-top: 30px;
    padding-bottom: 20px;
}

.page {
    padding-left: 255px;
    padding-top: 20px;
    /* text-align: center; */
}

.btn2 {
    height: 40px;
    width: 60px;
}

.btn3 {
    height: 40px;
    width: 120px;
}
</style>